<template>
    <!-- 头部 -->
    <Header></Header>
    <div class="body-main">
        <el-tabs class="demo-tabs">
            <el-tab-pane>
                <template #label>
                    <span class="author-tabs-label"> 文章 </span>
                </template>
                <ul v-if="list.length != 0" class="author-list" id="circleContentList">
                    <li @click="gotoDetails(item.id)" class="item" v-for="item in list" :key="item?.id">
                        <div class="left">
                            <el-image class="img" src="https://cdn3.saikr.com/img/def-user.jpg?v=2017030141410?imageView2/1/w/36/h/36"> </el-image>
                            <svg
                                t="1710378515878"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="16865"
                                width="200"
                                height="200"
                            >
                                <path
                                    d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z"
                                    fill="#272636"
                                    p-id="16866"
                                ></path>
                            </svg>
                        </div>
                        <div class="right">
                            <div class="text">
                                <p class="arti-author">
                                    <a class="link-auther-homepage" target="_blank">{{ item.pushName || "匿名" }}</a>
                                    <span class="po-pa">·</span>
                                    <!-- 学校 -->
                                    <span class="post-school"></span>
                                    <span class="po-pa">·</span><span class="post-time">{{ item.pushTime }}</span>
                                </p>
                                <h3 class="arti-tit">
                                    <a class="arti-tit-link">{{ item?.title }}</a>
                                </h3>
                                <el-text line-clamp="2" class="para">
                                    {{ item?.summary }}
                                </el-text>
                                <div class="item-handle-box">
                                    <span>
                                        <svg
                                            t="1710381054037"
                                            class="icon"
                                            viewBox="0 0 1024 1024"
                                            version="1.1"
                                            xmlns="http://www.w3.org/2000/svg"
                                            p-id="17926"
                                            width="16"
                                            height="16"
                                        >
                                            <path
                                                d="M979.222 415.474C894.954 332.02 776.31 192.004 509.958 192.004c-266.316 0-384.962 140.016-469.23 223.47-19.86 19.682-30.788 45.784-30.788 73.534 0 27.728 10.93 53.85 30.788 73.51 84.27 83.476 202.896 223.47 469.23 223.47 266.368 0 384.996-139.994 469.264-223.47 19.86-19.66 30.79-45.784 30.79-73.51C1010.01 461.256 999.082 435.156 979.222 415.474zM940.882 524.282C862.556 601.838 756.802 732 509.958 732c-246.81 0-352.564-130.164-430.89-207.718-9.548-9.468-14.8-22.01-14.8-35.276 0-13.288 5.252-25.806 14.8-35.252 78.344-77.578 184.098-207.764 430.89-207.764 246.826 0 352.58 130.186 430.924 207.764 9.55 9.446 14.802 21.966 14.802 35.252C955.684 502.272 950.432 514.812 940.882 524.282zM509.974 335.996c-84.868 0-153.928 68.652-153.928 152.988 0 84.358 69.06 153.01 153.928 153.01 84.872 0 153.93-68.652 153.93-153.01C663.904 404.648 594.846 335.996 509.974 335.996zM509.974 588.008c-54.912 0-99.6-44.428-99.6-99.024 0-54.574 44.69-98.978 99.6-98.978 54.912 0 99.6 44.404 99.6 98.978C609.576 543.58 564.888 588.008 509.974 588.008z"
                                                p-id="17927"
                                                fill="#aaaaaa"
                                            ></path>
                                        </svg>
                                        <span>阅读数</span>
                                        <em>{{ item?.viewCount }}</em>
                                    </span>
                                </div>
                            </div>
                            <!-- 如果有封面图片就显示没有就不显示 -->
                            <div class="img">
                                <el-image :src="(item as any).imagrUrl"> </el-image>
                            </div>
                        </div>
                    </li>
                </ul>
            </el-tab-pane>
            <el-tab-pane>
                <template #label>
                    <span class="author-tabs-label">提问</span>
                </template>
                <div class="quiz-list">
                    <div class="item" v-for=" in 10">
                        <div class="left">
                            <h3 class="arti-author">
                                <a class="link-auther-homepage" target="_blank">大学生值得参加竞赛有哪些？</a>
                            </h3>
                            <p class="arti-user-info">
                                <a>
                                    <img src="https://publicqn.saikr.com/FgFVTeVSbE8x7ZrlucBihJWvwAjM?imageView2/1/w/16/h/16" />
                                    <span class="user-name">闫庆萍</span>
                                    <span class="po-pa">·</span>
                                    <span class="post-school">大连理工大学</span>
                                    <span class="po-pa">·</span><span class="post-time">2021-06-08</span>
                                </a>
                            </p>
                            <el-text line-clamp="2" class="para">
                                科普：1、英语类竞赛大多不限专业，都能参加科普：1、英语类竞赛大多不限专业，都能参加科普：1、英语类竞赛大多不限专业，都能参加小科普：1、英语类竞赛大多不限专业，都能参加；2、比起一些竞赛要组队、找指导老师，大多英语类竞赛相对自由些，"孤狼"友好；（尤其是初、复赛。但还是建议找老师和英语。但还是建议找老师和好的人多交流，收获...
                            </el-text>
                        </div>
                        <div class="right">
                            <div class="count-box">
                                <p class="uniform">44554</p>
                                <p class="uniform">阅读</p>
                            </div>
                            <div class="count-box">
                                <p class="uniform data">21</p>
                                <p class="uniform read">回答</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <FixedMenu />
    </div>
    <!-- 底部 -->
    <Footer></Footer>
</template>
<script setup lang="ts">
import { getList } from "@/api/article";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
function gotoDetails(contestId: string) {
    console.log(11);
    router.push({
        path: "/article-details",
        query: { contestId, type: 2 },
    });
}

const list = ref<any[]>([]);
onMounted(async () => {
    const data = await getList();
    list.value = data.data.data;
});
</script>
<style lang="scss" scoped>
.author-tabs-label {
    color: $main-color;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    height: 60px;
    width: 90px;
}

:deep(.el-tabs__active-bar) {
    border: 2px $main-color solid;
    border-radius: 10px;
}

.body-main {
    width: 900px;
    margin: 20px auto;
    .author-list {
        > .item {
            display: flex;
            padding: 24px 20px;
            margin-bottom: 30px;
            border: 1px solid #eee;
            > .left {
                width: 5%;
                display: flex;
                flex-direction: column;
                margin-right: 10px;
                width: fit-content;

                .img {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                }

                .icon {
                    width: 30px;
                    height: 19px;
                    border-radius: 2px;
                    background: #f6f6f6;
                    margin: 5px auto 0;
                }
            }

            > .right {
                width: 80%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .text {
                    > .arti-author {
                        color: #ccc;
                        font-size: 12px;

                        .po-pa {
                            margin: 0 4px;
                        }
                    }

                    > .arti-tit {
                        padding: 6px 0;
                        font-weight: 400;

                        > .arti-tit-link {
                            @include Hover($main-color, #444);
                            color: #444;
                            font-size: 16px;
                            display: block;
                            max-width: 650px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            line-height: 1;
                            padding: 4px 0;
                        }
                    }

                    > .para {
                        line-height: 18px;
                        font-size: 12px;
                        color: #999;
                        overflow: hidden;
                    }

                    > .item-handle-box {
                        display: flex;
                        margin: 15px 0 0;
                        > span {
                            display: flex;
                            align-items: center;
                            padding-right: 15px;
                            font-size: 12px;
                            color: #aaa;
                            line-height: 21px;

                            > span {
                                padding: 0 4px;
                            }
                        }
                    }
                }

                .img {
                    :deep(.el-image__inner) {
                        width: 135px;
                        height: 90px;
                        border-radius: 10px;
                        margin-left: 10px;
                    }
                }
            }
        }
    }

    .quiz-list {
        > .item {
            display: flex;
            align-items: center;
            padding: 24px 20px;
            border: 1px solid #eee;
            margin-bottom: 30px;
            > .left {
                > h3 {
                    @include Hover($main-color, #444);
                    font-weight: 400;
                    color: #444;

                    > a {
                        padding-bottom: 0;
                        margin-bottom: 10px;
                    }
                }

                > .arti-user-info {
                    > a {
                        display: flex;
                        align-items: center;
                        margin: 6px 0;
                        color: #ccc;
                        font-size: 12px;
                        height: 20px;

                        > img {
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                        }

                        span {
                            padding: 0px 4px;
                        }
                    }

                    .user-name {
                        &:hover {
                            color: $main-color;
                            text-decoration: underline;
                        }
                    }
                }

                > .para {
                    line-height: 18px;
                    font-size: 12px;
                    color: #999;
                    overflow: hidden;
                }
            }

            > .right {
                display: flex;
                > .count-box {
                    margin-left: 10px;
                    height: fit-content;
                    border-radius: 5px;
                    overflow: hidden;
                    border: 1px solid rgba($color: $main-color, $alpha: 0.1);
                    > p {
                        width: 84px;
                        height: 41px;
                        text-align: center;
                        line-height: 41px;
                    }

                    &:nth-child(1) {
                        p {
                            color: $main-color;
                            background-color: rgba($color: $main-color, $alpha: 0.3);

                            &:nth-child(2) {
                                background-color: #fff;
                            }
                        }
                    }

                    &:nth-child(2) {
                        p {
                            color: #666666;
                            background-color: rgba($color: #eeeeee, $alpha: 0.5);

                            &:nth-child(2) {
                                background-color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
